<template>
  <div class="tabs">
    <el-tag
    class="tab"
    v-for="(tag,index) in tags"
    :key="tag.name"
    :effect="tag.name==route.name?'dark':'plain'"
    :closable="tag.name!='home'"
    :disable-transitions="false"
    @click="clickTab(tag)"
    @close="closeTab(tag,index)"
  >
    {{ tag.label }} 
  </el-tag>
  </div>
</template>

<script setup lang = 'ts'>
import {useRoute,useRouter} from "vue-router"
import {useStore} from '../store'
const route = useRoute()
const router = useRouter()
const test = useStore()

const tags = test.tableList

const clickTab = (item:any)=>{
    router.push(item.path)
    setStoreCurrent(item)
}
// 删除tab标签
const closeTab = (item:any,index:number)=>{
    if(route.name!==item.name){
        test.tableList.splice(index,1)
    }else if(index===test.tableList.length-1){
        test.tableList.pop()
        router.push(test.tableList[index-1].path)
        // test.tableList[index-1].name==='home'?test.current=null:test.current=test.tableList[index-1]
        setStoreCurrent(test.tableList[index-1])
    }else{
        test.tableList.splice(index,1)
        router.push(test.tableList[index].path)
        // test.tableList[index-1].name==='home'?test.current=null:test.current=test.tableList[index-1]
        setStoreCurrent(test.tableList[index])
    }
}
//点击标签，切换面包屑
const setStoreCurrent = (tableListName:any)=>{
    tableListName.name==='home'?test.current=null:test.current=tableListName

}
</script>

<style lang="less" scoped>
.tab{
    margin-right: 10px;
    cursor: pointer;
}
</style>
